import {
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  Label as RechartsLabel,
  ResponsiveContainer,
  XAxis,
  YAxis,
} from 'recharts'
import Label from '../Label'
import { tick1 } from './Section2'

const data = [
  { name: 1, ly: 190, ty: 210 },
  { name: 2, ly: 288, ty: 312 },
  { name: 3, ly: 402, ty: 518 },
  { name: 4, ly: 600 },
  { name: 5, ly: 422 },
  { name: 6, ly: 350 },
  { name: 7, ly: 540 },
  { name: 8, ly: 800 },
  { name: 9, ly: 640 },
  { name: 10, ly: 502 },
  { name: 11, ly: 645 },
  { name: 12, ly: 802 },
]
function tickX(props: any) {
  const { x, y, payload, ...attrs } = props
  return (
    <text {...attrs} x={x} y={y + 8} fill="#f0f0f0">
      {props.payload.value}
    </text>
  )
}
export default function Section4(props: React.HTMLAttributes<HTMLElement>) {
  return (
    <Label {...props} title="预计2024年完成生产总值稳步增长" noBorder>
      <ResponsiveContainer>
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3" vertical={false} />
          <XAxis dataKey="name" tick={tickX} padding={{ right: 60 }}>
            <RechartsLabel position="insideRight">月份</RechartsLabel>
          </XAxis>
          <YAxis tick={tick1} padding={{ top: 20 }}>
            <RechartsLabel position="top">单位:万元</RechartsLabel>
          </YAxis>
          <Legend
            align="center"
            layout="horizontal"
            verticalAlign="top"
            formatter={val => (({ ty: '2024年', ly: '2023年' }) as any)[val]}
          />
          <Line type="monotone" dataKey="ly" stroke="#3483C5" strokeWidth={3} />
          <Line type="monotone" dataKey="ty" stroke="#62C68F" strokeWidth={3} />
        </LineChart>
      </ResponsiveContainer>
    </Label>
  )
}
